<template>
  <div>
    <div class="numberconfirm">
      <div class="numberconfirm-left">手机验证码：</div>
      <up-input
        placeholder="6位手机短信验证码"
        border="surround"
        v-model="numberconfirm"
        @change="change"
        class="input"
      >
      </up-input>
    </div>
  </div>
</template>

<script setup>
import { ref, defineModel } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 绑定验证码的输入
const numberconfirm = defineModel();

// 输入框值变化时的处理函数
const change = (e) => {
  console.log("change", e);
};
</script>

<style lang="scss" scoped>
.numberconfirm {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  width: 18.5rem;
}

.numberconfirm-left {
  margin-left: 1rem;
  font-size: 1rem;
  margin-right: 0.5rem;
  /* 文字与输入框之间的间距 */
}

.input {
  width: 10rem;
  /* 调整输入框宽度 */
  height: 1.4rem;
  padding: 0.2rem;
  border: 2px solid #000;
  /* 黑色边框，边框宽度为2px */
  border-radius: 0;
  /* 方形边框，无圆角 */
  font-size: 0.9rem;
  margin-left: 0;
}
</style>
